<template>
  <div>
    <!-- 三级路由导航区 -->
    <ul>
      <li @click="toDetail(1)"><a>message-001</a></li>
      <li @click="toDetail(2)"><a>message-002</a></li>
      <li @click="toDetail(3)"><a>message-003</a></li>
    </ul>
    <!-- 三级路由展示区 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "messages",
  methods: {
    toDetail(id) {
        // 模板字符串写法
        // this.$router.push(`/home/message/detail/${id}?&id=${id}`)
        // 对象写法 
        // 对象中path和params不能同时存在 需要给路由加name属性把path替换成name属性
        // 或者 path写成模板字符串
        // this.$router.push({path:`/home/message/detail/${id}`,query:{id:id}})
        this.$router.push({name:'detail',params:{id:id},query:{id:id}})
    },
  },
};
</script>

<style scoped>
</style>